import React from 'react';
import { Card, Pagination } from 'antd';


export default class KimMenu extends React.Component {
  state = { current: 3, }

  render() {
    return (
      <>
        <Card title='简单的翻页' style={{ marginTop: 10 }}>
          <Pagination simple defaultCurrent={2} total={50} />
        </Card>

        <Card title='基础分页' style={{ marginTop: 10 }}>
          <Pagination defaultCurrent={1} total={50} />
        </Card>

        <Card title='更多分页' style={{ marginTop: 10 }}>
          <Pagination showSizeChanger defaultCurrent={3} total={500} />
          <br/>
          <Pagination defaultCurrent={6} total={500} disabled />
        </Card>

        <Card title='改变每页显示条目数' style={{ marginTop: 10 }}>
          <Pagination showSizeChanger onShowSizeChange={(current, pageSize) => { console.log(current, pageSize); }} defaultCurrent={3} total={500} />
        </Card>

        <Card title='快速跳转到某一页' style={{ marginTop: 10 }}>
          <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={pageNumber => console.log('Page: ', pageNumber)} />
        </Card>

        <Card title='迷你版本' style={{ marginTop: 10 }}>
          <Pagination size="small" total={50} showSizeChanger showQuickJumper showTotal={(total)=>`共${total}条`}  />
        </Card>

        <Card title='受控制的页码' style={{ marginTop: 10 }}>
          <Pagination current={this.state.current} onChange={page => this.setState({ current: page })} total={50} />
        </Card>

        <Card title='通过设置 showTotal 展示总共有多少数据' style={{ marginTop: 10 }}>
          <Pagination total={85} showTotal={(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`} pageSize={20} defaultCurrent={1} />
        </Card>

        <Card title='修改上一步和下一步为文字链接' style={{ marginTop: 10 }}>
          <Pagination total={500} itemRender={(current, type, originalElement) => { if (type === 'prev') { return <a>上一页</a>; } if (type === 'next') { return <a>下一页</a>; } return originalElement; }} />
        </Card>

      </>

    );
  }
}


// API#
// <Pagination onChange="{onChange}" total="{50}" />
// 参数	                            说明	类型	默认值	版本
// current	                       当前页数	number	-	
// defaultCurrent	                 默认的当前页数	number	1	
// defaultPageSize	               默认的每页条数	number	10	
// disabled	                       禁用分页	boolean	-	3.18.0
// hideOnSinglePage	               只有一页时是否隐藏分页器	boolean	false	3.1.0
// itemRender	                     用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode	-	
// pageSize	                       每页条数	number	-	
// pageSizeOptions	               指定每页可以显示多少条	string[]	['10', '20', '30', '40']	
// showLessItems	                 show less page items	boolean	false	3.16.3
// showQuickJumper	               是否可以快速跳转至某页	boolean | { goButton: ReactNode }	false	
// showSizeChanger	               是否可以改变 pageSize	boolean	false	
// showTotal	                     用于显示数据总量和当前数据顺序	Function(total, range)	-	
// simple	                         当添加该属性时，显示为简单分页	boolean	-	
// size	                           当为「small」时，是小尺寸分页	string	""	
// total	                         数据总数	number	0	
// onChange	                       页码改变的回调，参数是改变后的页码及每页条数	Function(page, pageSize)	noop	
// onShowSizeChange	               pageSize 变化的回调	Function(current, size)	noop

